// 用户管理
<template>
  <div class="page-box h100 display-flex czbj">
    <div class="">
      <n-form ref="formRef" inline size="normal">
        <n-form-item>
          <n-input
            v-model:value="parameters.accountNumber"
            placeholder="请输账号"
            size="medium"
          />
        </n-form-item>
        <n-form-item>
          <n-input
            v-model:value="parameters.nickname"
            placeholder="请输昵称"
            size="medium"
          />
        </n-form-item>
        <n-form-item>
          <n-input
            v-model:value="parameters.phoneNumber"
            placeholder="请输手机号"
            size="medium"
          />
        </n-form-item>
        <n-form-item>
          <n-button type="info" size="medium" @click="initData">查询</n-button>
          <n-button type="info" size="medium" @click="initForm" class="ml10"
            >+新增</n-button
          >
          <n-button
            type="error"
            size="medium"
            @click="topDel"
            class="ml10"
            :disabled="pitchOn.length > 0 ? false : true"
            >删除</n-button
          >
        </n-form-item>
      </n-form>
    </div>
    <n-spin :show="show">
      <n-data-table
        size="small"
        class="mt10"
        :row-key="(row) => row.id"
        :max-height="650"
        :pagination="paginationReactive"
        :columns="columns"
        :data="tableData"
        :single-line="false"
        remote
        @update:page="handlePageChange"
        @update:checked-row-keys="handleCheck"
      />
    </n-spin>

    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>{{ redact ? "编辑" : "添加" }}</div>
      </template>
      <div class="pl10">
        <n-form
          ref="formRef"
          :model="model"
          :rules="rules"
          label-placement="left"
          label-width="70px"
          require-mark-placement="right-hanging"
          size="medium"
          :style="{
            maxWidth: '640px',
          }"
        >
          <n-grid :cols="24" :x-gap="20">
            <n-form-item-gi :span="12" label="账号" path="accountNumber">
              <n-input placeholder="账号" v-model:value="model.accountNumber" />
            </n-form-item-gi>
            <n-form-item-gi :span="12" label="手机号码" path="phoneNumber">
              <n-input
                placeholder="手机号码"
                v-model:value="model.phoneNumber"
              />
            </n-form-item-gi>
            <n-form-item-gi :span="12" label="密码" path="password">
              <n-input
                placeholder="密码"
                v-model:value="model.password"
                type="password"
              />
            </n-form-item-gi>
            <n-form-item-gi :span="12" label="确认密码" path="qpassword">
              <n-input
                placeholder="确认密码"
                v-model:value="model.qpassword"
                type="password"
              />
            </n-form-item-gi>
            <n-form-item-gi :span="12" label="真实姓名" path="inputValue">
              <n-input placeholder="真实姓名" v-model:value="model.realName" />
            </n-form-item-gi>
            <n-form-item-gi :span="12" label="昵称" path="inputValue">
              <n-input placeholder="昵称" v-model:value="model.nickname" />
            </n-form-item-gi>

            <n-form-item-gi :span="12" label="头像" path="headPortrait">
              <div
                class="headPortrait-box vertical-center sz"
                @click="photoShowModal = true"
              >
                <img :src="model.headPortrait" v-if="model.headPortrait" />
                <i class="iconfont dx-tupian fz30" v-else> </i>
              </div>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="addConfirm">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModal"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>图片库</div>
      </template>
      <div>
        <photoGallery @getImg="getImg"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { h, ref, reactive } from "vue";
import { dxget, dxdel, dialog, dxpost } from "../../util/index";
import { NButton } from "naive-ui";
import photoGallery from "../../components/util/photoGallery";
const formRef = ref(null);
let show = ref(false);
let tableData = ref([]);
let pitchOn = ref([]);
let showModal = ref(false);
let photoShowModal = ref(false);
let imgVal = ref();
let redact = ref(false); // 是否为编辑状态
let model = reactive({
  id: "",
  accountNumber: "",
  phoneNumber: "",
  password: "",
  qpassword: "",
  realName: "",
  nickname: "",
  headPortrait: "",
});
const paginationReactive = reactive({
  page: 1,
  pageCount: 1,
});
let parameters = reactive({
  accountNumber: "",
  nickname: "",
  phoneNumber: "",
  page: 1,
});
let columns = [
  {
    type: "selection",
  },
  {
    title: "头像",
    align: "center",
    render(row) {
      return h("img", { src: row.headPortrait, class: "usericon cz" });
    },
  },
  {
    title: "账号",
    key: "accountNumber",
    align: "center",
  },
  {
    title: "真实姓名",
    key: "realName",
    align: "center",
  },
  {
    title: "昵称",
    key: "nickname",
    align: "center",
  },
  {
    title: "手机号码",
    key: "phoneNumber",
    align: "center",
  },
  {
    title: "最近修改时间",
    key: "addTime",
    align: "center",
  },
  {
    title: "操作",
    align: "center",
    render(row) {
      return [
        h(
          NButton,
          {
            type: "info",
            quaternary: true,
            onClick: () => {
              model.id = row.id;
              model.accountNumber = row.accountNumber;
              model.phoneNumber = row.phoneNumber;
              model.password = row.password;
              model.qpassword = row.password;
              model.realName = row.realName;
              model.nickname = row.nickname;
              model.headPortrait = row.headPortrait;
              showModal.value = true;
              redact.value = true;
            },
          },
          "编辑"
        ),
        h(
          NButton,
          {
            type: "error",
            quaternary: true,
            onClick: () => {
              delUser(row.id);
            },
          },
          "删除"
        ),
      ];
    },
  },
];
let rules = {
  accountNumber: {
    required: true,
    trigger: ["blur", "input"],
    message: "请输入账号",
  },
  phoneNumber: {
    required: true,
    trigger: ["blur", "input"],
    message: "请输入手机号码",
  },
  password: {
    required: true,
    trigger: ["blur", "input"],
    message: "请输入密码",
  },
  qpassword: {
    required: true,
    trigger: ["blur", "input"],
    message: "请确认密码",
  },
  headPortrait: {
    required: true,
    trigger: ["blur", "input"],
    message: "请上传头像",
  },
};
const initData = async () => {
  show.value = true;
  const { data }: any = await dxget("dxgjAdmin/user", parameters);
  show.value = false;
  tableData.value = data.data;
  paginationReactive.pageCount = data.totalPages;
};
initData();
const handlePageChange = (page) => {
  paginationReactive.page = page;
  parameters.page = page;
  initData();
};
const handleCheck = (data) => {
  pitchOn.value = data;
};
const getImg = (img) => {
  imgVal.value = img;
};
const setImg = () => {
  model.headPortrait = imgVal.value;
  photoShowModal.value = false;
};
const addConfirm = async () => {
  formRef.value.reset;
  formRef.value.validate(async (errors) => {
    if (!errors) {
      if (model.password != model.qpassword) {
        window.$message.error("两次输入的密码不一致！");
        return;
      }
      let { errno }: any = await dxpost(
        "dxgjAdmin/user",
        model,
        redact.value ? "PUT" : "POST"
      );
      if (errno == 0) {
        window.$message.success("操作成功！");
        showModal.value = false;
        redact.value = false;
        initData();
      }
    } else {
      console.log(errors);
    }
  });
};
const delUser = async (id) => {
  let statics: any = await dialog("此操作将永久删除, 是否继续?");
  if (statics == 1) {
    let { errno }: any = await dxdel("dxgjAdmin/user", {
      id: id,
    });
    if (errno == 0) {
      window.$message.success("删除成功！");
      initData();
    }
  }
};
const topDel = () => {
  delUser(pitchOn.value.join(","));
  pitchOn.value = [];
};
const initForm = () => {
  model.id = "";
  model.accountNumber = "";
  model.phoneNumber = "";
  model.password = "";
  model.qpassword = "";
  model.realName = "";
  model.nickname = "";
  model.headPortrait = "";
  showModal.value = true;
};
</script>
 <style scoped>
</style>